<template>
  <div class="app">
    {{msg}}
    <!-- // 通过父组件给子组件传递props实现 数据传递 -->
    <School :getSchoolName="getSchoolName"/>
     <!-- // 通过父组件给子组件绑定事件实现 数据传递 1-->
    <Student v-on:student="getStudentName" @event2="event2"/>
    <!-- <Student @student.once="getStudentName"/> -->
     <!-- // 通过父组件给子组件绑定事件实现 数据传递 2-->
    <!-- <Student ref="studentRef" @click.native="show"/> -->
  </div>
</template>

<script>

import School from './components/School.vue'
import Student from './components/Student.vue'

export default {
    name:'Vue',
    components:{
        Student,
        School,
    },
    data() {
      return {
        msg:'你好'
      }
    },
    methods: {
      getSchoolName(name){
        console.log('app getSchoolName name is ',name)
        this.msg = name
      },
      getStudentName(name){
        console.log('app getStudentName name is ',name)
        this.msg = name
      },
      event2(){
        console.log('app event2 name')
      }
    },  
    mounted(){
      /* setTimeout(()=>{
        //this.$refs.studentRef.$once('student',this.getStudentName)
      },3000) */
      // this.$refs.studentRef.$on('student',this.getStudentName)
      
    }
    
}
</script>

<style scoped>
  .app{
    background-color: thistle;
    padding: 5px;
  }
</style>
